<template>
  <div class="playListPopup" v-if="showPlayList" ref="popRef">
    <div class="title">当前播放</div>
    <div class="operateRow"></div>
    <div class="tableCont">
      <el-table
        size="small"
        stripe
        style="width: 100%; height: 100%"
        :data="playList"
        :show-header="false"
      >
        <el-table-column prop="name" label="标题"></el-table-column>
        <el-table-column label="歌手">
          <template #default="scope">
            <span
              v-for="(ar, index) in scope.row.ar"
              :key="ar.id"
              class="tableLink"
            >
              <span @click="gotoArtistPage(ar.id)">
                {{ ar.name }}
              </span>
              <span
                v-if="index !== scope.row.ar.length - 1"
                style="margin: 0 2px"
                >/</span
              >
            </span>
          </template>
        </el-table-column>

        <el-table-column label="时长" width="120px">
          <template #default="scope">
            <span>
              {{ formatDt(scope.row.dt) }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { usePlayerStores } from "@/stores/player";
import { storeToRefs } from "pinia";
import { formatDt } from "@/utils/utils";

const popRef = ref<null | HTMLElement>(null);

const playerStore = usePlayerStores();
const { showPlayList, playList } = storeToRefs(playerStore);

const handleClickOutside = (event: Event) => {
  if (!popRef.value?.contains(event.target as HTMLElement)) {
    if (showPlayList) {
      playerStore.closePlaylist();
    }
  }
};

/**
 * 去歌手主页 todo
 * @param artistId
 */
const gotoArtistPage = (artistId: number) => {};

onMounted(() => {
  const mainPanel = document.getElementById("appMainpanel");
  if (mainPanel) mainPanel.addEventListener("click", handleClickOutside);
});

onUnmounted(() => {
  const mainPanel = document.getElementById("appMainpanel");
  if (mainPanel) mainPanel.removeEventListener("click", handleClickOutside);
});
</script>

<style scoped lang="less">
.playListPopup {
  position: absolute;
  bottom: 0px;
  right: 0;
  background-color: #fff;
  width: 420px;
  height: 100%;
  padding: 10px;
  z-index: 15;
  box-shadow: 0 0 5px 0.5px rgba(0, 0, 0, 0.15);
  .title {
    font-size: 24px;
    color: #333;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
  }
  .operateRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }
  .tableCont {
    height: calc(100% - 68px);
  }
}
</style>
